﻿@{
    ViewBag.Title = "Call Effectiveness";
}

<h2>Call Effectiveness</h2>
<table >

@foreach (var item in ViewBag.Cities)
{
    <tr>
        <td>
           @item.Value
            <div id="chart_call_effectivenessPerCity@(item.Key)" style="width: 900px; height: 300px;">
            </div>
            <script type="text/javascript">
             google.load("visualization", "1", { packages: ["corechart"] });
            google.setOnLoadCallback(drawlineChart);
            function drawlineChart() {
                $.post('/bat/GetCallageEffectivenessByCityDashBoard', {cityid:@(item.Key)},
                    function (data) {
                        var tdata = new google.visualization.DataTable(data,0.5);

                        var options = {
                            title: " Call Effectiveness  @item.Value",
                            legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
                            hAxis: { title: 'Period' },
                            vAxis: {title: 'Percentage', minValue: 0, baseline: 0},
                        };
                        var chart = new google.visualization.LineChart(document.getElementById('chart_call_effectivenessPerCity@(item.Key)'));
                        chart.draw(tdata, options);
                    });
            }
        </script>
        </td>
    </tr>
}

</table>



